<template>
  <div class="menu">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#191A23"
      text-color="#99A1A9"
      active-text-color="#fff"
      :router="true"
      style="height: calc(100vh - 60px)"
    >
      <el-menu-item index="/home">
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span>首页</span>
        </template>
      </el-menu-item>
      <el-submenu index="/account">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span>人员管理</span>
        </template>
        <el-menu-item index="/account" v-if="role == 2">账号管理</el-menu-item>
        <el-menu-item index="/updatepwd">修改密码</el-menu-item>
      </el-submenu>
      <el-submenu index="/ranch">
        <template slot="title">
          <i class="el-icon-s-tools"></i>
          <span>基础配置</span>
        </template>
        <el-menu-item index="/ranch">牧场管理</el-menu-item>
        <el-menu-item index="/colonyhouse">圈舍管理</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      role: ''
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    }
  },
  created () {
    let user = JSON.parse(localStorage.getItem('user'))
    this.role = user.role
  }
}
</script>

<style lang="less" scoped>
.menu {
  text-align: left;
  overflow: hidden;
  // width: 180px;
}

.el-menu-item.is-active {
  background-color: #1677ff !important;
}
</style>